<template>
  <div class="box">
    <header class="header search">
      <van-nav-bar
      left-arrow
      @click-left="$router.back()"
      @click-right="goSearch"
      >
        <template #title>
          <van-search
            shape="round"
            placeholder="请输入搜索关键词"
            v-model="value"
          />
        </template>
        <template #right>
          <van-button type="danger" size="small">搜索</van-button>
        </template>
      </van-nav-bar>
    </header>
    <div class="content search">
      <div class="historySearch s-Box">
        <h4>最近搜索</h4>
        <van-tag closeable size="medium" @click="goSearch(item.searthText)" v-for="(item,idx) in history" :key="item.searthId" @close="close(item.searthId, idx)">{{item.searthText}}</van-tag>
      </div>
      <div class="hotSearch s-Box">
        <h4>热门搜索</h4>
        <van-tag type="warning" size="medium" @click="goSearch(item)" v-for="item in hot" :key="item">{{item}}</van-tag>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { NavBar, Search, Button, Tag, Toast } from 'vant'
import { searchAdd, getText, delText } from '../../api/index.js'

Vue.use(NavBar)
Vue.use(Search)
Vue.use(Button)
Vue.use(Tag)
Vue.use(Toast)

export default {
  data () {
    return {
      value: '',
      hot: ['明星同款', '华为Mate30', 'Iphone12', '手机', '电脑', '化妆品', '地铁睡觉神器', '李现同款手机'],
      history: []
    }
  },
  methods: {
    // goSearch () {
    //   if (this.value !== '') {
    //     searchAdd({
    //       userId: localStorage.getItem('userId'),
    //       searchText: this.value
    //     }).then(res => {
    //       this.$router.push('/searchDetail/' + this.value)
    //     })
    //   } else {
    //     Toast('请输入关键字')
    //   }
    // },
    goSearch (val) {
      let st = ''
      if (typeof val !== 'object') {
        st = val
      } else {
        st = this.value
      }
      if (st === '') {
        Toast('请输入搜索关键字')
        return null
      }
      searchAdd({
        userId: localStorage.getItem('userId'),
        searchText: st
      }).then(res => {
        // console.log('添加成功，可以跳转到搜索页面了')
        getText({
          userId: localStorage.getItem('userId')
        }).then(res => {
          this.history = res.data.data
          console.log(this.history)
        })
      })
      this.$router.push('/searchDetail/' + st)
    },
    close (id, idx) {
      console.log(id)
      delText({
        userId: localStorage.getItem('userId'),
        searchId: id
      }).then(res => {
        this.history.splice(idx, 1)
      })
    }
  },
  mounted () {
    console.log(localStorage.getItem('userId'))
    getText({
      userId: localStorage.getItem('userId')
    }).then(res => {
      console.log(res.data.data)
      this.history = res.data.data
    })
  }
}
</script>

<style lang="scss">
.search .van-nav-bar {
  .van-nav-bar__title {
    width: 70%;
    max-width: 70%;
  }
  .van-nav-bar__left {
    i {
      color: #000000;
    }
  }
  .van-nav-bar__right {
    .van-button {
      border-radius: .05rem;
      .van-button__content {
        font-size: .15rem;
      }
    }
  }
}
.search.content {
  padding: .1rem .2rem;
  .hotSearch {
    span {
      margin: .1rem .05rem;
      color: #333;
      background-color: #eee;
    }
  }
}
.search .van-search {
  width: 95%;
  padding: 0;
  i {
    color: #333;
  }
  .van-search__content {
    width: 100%;
    border: 2px solid #ccc;
  }
}
.historySearch {
  .van-tag {
    margin: .1rem;
    background-color: #eee;
    color: #333;
  }
}
</style>
